<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;" :style="[{paddingTop: StatusBar + 'px'}]">
		<view style="padding: 32rpx;">
			<text class="cuIcon-close text-black" style="font-size: 50rpx; font-weight: bold;" @click="back"></text>
		</view>
			
		<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;">
		       验证码已发送至
		</view>
		<view style="padding: 32rpx;">{{$Route.query.mobile}}</view>
		<view style="margin-top: 60rpx; padding: 0 32rpx;">
			<view class="flex align-center justify-between solid-bottom" style="height: 104rpx;">
				<input v-model="captcha" type="number" maxlength="6" placeholder="请输入验证码" style="flex:1;font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
			</view>
		</view>
		<view style="padding: 0 32rpx; margin-top: 64rpx;">
			<button @click="login" :disabled="captcha.length<6" :style="captcha.length<6? {opacity: 0.5}:''" 
			style=" height: 96rpx; color: white; background-color: #007AFF; border-radius: 8rpx;font-size: 36rpx;">
			登录</button>
		</view>
	</view>	
</template>

<script>
	import { mapActions } from "vuex"
	export default{
		data() {
			return {
				captcha: '',	
			}
		},
		methods:{
			...mapActions([ "PhoneLogin" ]),
             back() {
				uni.navigateBack({
					delta: 1
				})
			},
			login(){
				let info={
					mobile:this.$Route.query.mobile,
					smsmode:this.captcha
				}
				this.PhoneLogin(info).then((res) => {
				  console.log("mLoginFrontEnd",res)
				  if(res.data.success){
				  if(res.data.result.isNew){
					  this.$Router.push({name:'setUser',params:{mobile:this.$Route.query.mobile}})
				  }
				  else{
					 this.$tip.success('登录成功!')
					 this.$Router.replaceAll({name:'indexFrontEnd'}) 
				  }
				  }
			     else{
			     this.$tip.alert(res.data.message);
			    }
				  
			})
		}
		}
	}	
</script>

<style>
</style>
